<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('学生个人考勤统计')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <input name="userId" id="userId" th:value="${userId}" type="hidden">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true" onclick="query(0)">周汇总</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false" onclick="query(1)">月汇总</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false" onclick="query(2)">学期汇总</a>
                    </li>
                </ul>
            </div>
            <div class="tab-content" id="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body">
                        <div class="echarts" id="echarts-bar-week-grade" ></div>
                        <strong>数据</strong>
                        <div class="col-sm-12 select-table table-striped">
                            <table id="week-grade-table"></table>
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">
                        <div class="echarts" id="echarts-bar-month-grade" ></div>
                        <strong>数据</strong>
                        <div class="col-sm-12 select-table table-striped">
                            <table id="month-grade-table"></table>
                        </div>

                    </div>
                </div>
                <div id="tab-3" class="tab-pane">
                    <div class="panel-body">
                        <div class="echarts" id="echarts-bar-half-grade"></div>
                        <strong>数据</strong>
                        <div class="col-sm-12 select-table table-striped">
                            <table id="half-grade-table"></table>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>


</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var monthGradeId= "echarts-bar-month-grade";
    var monthGradeChart = echarts.init(document.getElementById(monthGradeId));
    var weekGradeId = "echarts-bar-week-grade";
    var weekGradeChart = echarts.init(document.getElementById(weekGradeId));
    var halfGradeId = "echarts-bar-half-grade";
    var halfGradeChart = echarts.init(document.getElementById(halfGradeId));

    var tableOpt = {
        columns: [{
            field: 'id',
            title: 'ID',
            visible: false
        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'total',
            title: '应签到'
        }, {
            field: 'advanceTwenty',
            title: '提前20分钟'
        }, {
            field: 'advanceTen',
            title: '提前10分钟'
        }
            , {
                field: 'onTime',
                title: '准时'
            }
            , {
                field: 'dutyNum',
                title: '迟到'
            }
        ],
        data:[]
    };
    $(window).resize(function() {
        monthGradeChart.resize();
        weekGradeChart.resize();
        halfGradeChart.resize();

    });
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        monthGradeChart.resize();
        weekGradeChart.resize();
        halfGradeChart.resize();

    });
    $(function() {
        $("#week-grade-table").bootstrapTable(tableOpt);
        $("#week-clazz-table").bootstrapTable(tableOpt);
        $("#month-grade-table").bootstrapTable(tableOpt);
        query(0);
    });

    function query(id){
        queryDatas(id);
        // queryClazzDatas(id);
    }

    function queryDatas(id) {
        var userId = $('#userId').val();
        $.ajax({
            type: "get",
                url:ctx + "school/record/reports/3/"+id+"/"+userId,
                async:false,
                dataType: "json",
                success: function(res){
                    // console.log(res);
                    if(id==0){
                        makeWeekChart(res);
                    }
                    if(id==1){
                        makeMonthChart(res);
                    }
                    if(id==2){
                        makeHalfChart(res);
                    }
                }
            }
        );
    };

    var baseChartOption = {
        title : {
            text: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['提前20分钟','提前10分钟','准时','迟到']
        },
        grid:{
            x:30,
            x2:30,
            y2:24
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : []
    }

    function makeWeekChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt;
        tab1.data = res.datas;
        $("#week-grade-table").bootstrapTable('destroy');
        $("#week-grade-table").bootstrapTable(tab1);
        weekGradeChart.setOption(baroption);
        window.onresize = weekGradeChart.resize;
        weekGradeChart.resize();
    }


    function makeMonthChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt;
        tab1.data = res.datas;
        $("#month-grade-table").bootstrapTable('destroy');
        $("#month-grade-table").bootstrapTable(tab1);
        monthGradeChart.setOption(baroption);
        window.onresize = monthGradeChart.resize;
        monthGradeChart.resize();
    }


    function makeHalfChart(res){
        var baroption = baseChartOption;
        baroption.title.text = '出勤率';
        baroption.legend.data = res.legend|['提前20分钟','提前10分钟','准时','迟到'];
        baroption.xAxis[0].data = res.xAxis;
        baroption.series = res.series;
        var tab1 = tableOpt;
        tab1.data = res.datas;
        $("#half-grade-table").bootstrapTable('destroy');
        $("#half-grade-table").bootstrapTable(tab1);
        halfGradeChart.setOption(baroption);
        window.onresize = halfGradeChart.resize;
        halfGradeChart.resize();
    }

</script>
</body>
</html>
